<script setup lang="ts">
import { ref } from "vue"
import vTabs from "../../components/v-tabs_2.1.5/components/v-tabs/v-tabs.vue"
const current = ref<Number>(0)
const tabs = ref<String[]>(['关注', '推荐', '餐饮业', '服务业', '服务业', '服务业', '服务业'])

const isChoose = ref<Number>(0)
/**
 * 选择tab
 *
 * @param index tab的索引值
 */

const chooseTab = (index: Number) => {
    isChoose.value = index
}

const isPlat = ref<Number>(0)
/**
 * 选择平台
 *
 * @param e 选择的平台编号
 */
const choosePlat = (e:Number) => {
    isPlat.value = e
}

/**
 * 滑动改变事件处理函数
 *
 * @param e 事件对象
 */
const swipeChange = (e:any) => {
    console.log(e.detail.current);
    isChoose.value = e.detail.current
}

/**
 * 跳转到账号页面
 */
const goAccount = () => {
    uni.navigateTo({ url: '/pages/video/account' })
}

/**
 * 跳转到详情页面
 */
const goDetails = () => {
    uni.navigateTo({ url: '/pages/create/details' })
}

const profession = ref<any>(null)
/**
 * 打开行业弹窗
 */
const openPro = () => {
    profession.value.open()
}

const choose = () => {
    profession.value.close()
}
</script>

<template>
    <view class="page">
        <view class="page-top"></view>
        <!-- <scroll-view scroll-x class="tab">
            <view class="tab-item" :class="isChoose==index?'active-tab':''" @click="chooseTab(index)" v-for="item,index in tabs" :key="index">
                <view style="display: flex;flex-direction: column;align-items: center;position: relative;">{{ item }}
                    <view class="line" v-if="isChoose==index"></view>
                </view>
            </view>
        </scroll-view> -->
        <v-tabs 
        color="rgb(144,147,153)" 
        activeColor="rgb(48,49,51)" 
        lineHeight="4rpx"
        lineColor="rgb(255,205,39)"
        lineRadius="140rpx"
        lineAnimation
        :value="isChoose"
        :tabs="tabs" 
        @change="chooseTab"></v-tabs>
        <view class="screen">
            <image @click="openPro" style="width: 48rpx;height: 48rpx;" src=""/>
        </view>
        <view class="setting">
            <view class="plats">
                <view :class="isPlat==0?'plat-active':''" @click="choosePlat(0)" class="plat">抖音</view>
                <view :class="isPlat==1?'plat-active':''" @click="choosePlat(1)" class="plat">快手</view>
                <view :class="isPlat==2?'plat-active':''" @click="choosePlat(2)" class="plat">小红书</view>
            </view>
            <image style="width: 48rpx;height: 48rpx;" src=""/>
        </view>
        <swiper class="swiper" @change="swipeChange" :current="isChoose">
			<swiper-item v-for="item,index in tabs">
                <view class="kong" v-if="false">
                    <image class="kong-img" src=""/>
                    <text class="kong-text">暂无视频</text>
                    <view class="kong-btn" @click="goAccount">添加行业账号</view>
                </view>
				<scroll-view scroll-y class="swiper-item">
                    <video @click="goDetails" class="item-video" src=""></video>
                </scroll-view>
			</swiper-item>
		</swiper>
    </view>
    <uni-popup ref="profession">
    <view class="pro-content">
      <scroll-view class="pro-box">
        <view class="pro-title">选择你的行业</view>
        <view class="pro-item">
          <view class="pro-cate">餐饮业</view>
          <view class="pro-cate-item1">
            <view class="pro-cate-item">火锅</view>
            <view class="pro-cate-item">火锅</view>
            <view class="pro-cate-item">火锅</view>
            <view class="pro-cate-item">火锅</view>
            <view class="pro-cate-item">火锅</view>
            <view class="pro-cate-item">火锅</view>
          </view>
        </view>
      </scroll-view>
      <button @click="choose" class="pro-btn">确认</button>
    </view>
  </uni-popup>
</template>

<style lang="scss" scoped>
    .page{
        position: fixed;
        width: 100%;
        height: 100%;
        background-color: rgb(246,248,251);
        overflow: hidden;
        .page-top{
            width: 100%;
            height: 176rpx;
            background-color: #fff;
        }
        .tab{
            width: 100%;
            height: 84rpx;
            white-space: nowrap;
            background-color: #fff;
            font-size: 32rpx;
            color: rgb(144,147,153);
            padding: 0 40rpx;
            line-height: 84rpx;
            .tab-item{
                display: inline-block;
                margin: auto 0;
                margin-right: 56rpx;
            }
           
            .active-tab{
                font-weight: 500;
                color: rgb(48,49,51);
            }
            
        }
        .screen{
            width: 200rpx;
            height: 84rpx;
            position: absolute;
            top: 176rpx;
            right: 0;
            background: linear-gradient(90deg,rgba(255,255,255,0)0%,rgba(255,255,255,1)100%);
            z-index: 9999;
            text-align: right;
            line-height: 84rpx;
        }
        .line{
            position: absolute;
            bottom: 0;
            width: 64rpx;
            height: 4rpx;
            background-color: rgb(255,205,39);
            border-radius: 140rpx;
            }
        .setting{
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 36rpx 24rpx;
            .plats{
                display: flex;
                .plat{
                    padding: 6rpx 24rpx;
                    text-align: center;
                    line-height: 56rpx;
                    background-color: rgb(235,235,235);
                    color: rgb(48,49,51);
                    font-size: 30rpx;
                    border-radius: 254rpx;
                    margin-right: 32rpx;
                }
                .plat-active{
                    background-color: rgb(255,205,39) !important;
                }
            }
        }
        .swiper{
            height: calc(100% - 380rpx);
            .kong{
            width: 610rpx;
            text-align: center;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            .kong-img{
                width: 610rpx;
                height: 368rpx;
            }
            .kong-text{
                font-size: 24rpx;
                color: rgb(144,147,153);
            }
            .kong-btn{
                margin: 0 auto;
                margin-top: 56rpx;
                width: 244rpx;
                height: 56rpx;
                text-align: center;line-height: 56rpx;
                border-radius: 300rpx;
                background-color: rgb(255,205,39);
                color: rgb(48,49,51);
                font-size: 30rpx;
            }
            }
            .swiper-item{
                height: 100%;
                padding: 0 24rpx;
                .item-video{
                    width: 344rpx;
                    height: 612rpx;
                    border-radius: 8rpx;
                    margin: 0 14rpx 12rpx 0;
                    &:nth-child(2n){
                        margin: 0 0 12rpx 0;
                    }
                }
            }
        }

    }
    .pro-content{
    .pro-box{
      width: 630rpx;
      height: 1000rpx;
      margin-bottom: 32rpx;
      background-color: #fff;
      border-radius: 8rpx;
      padding: 40rpx 32rpx;
      .pro-title{
        font-size: 36rpx;
        color: rgb(48,49,51);
        text-align: center;
        margin-bottom: 40rpx;
      }
      .pro-item{
        width: 100%;
        height: 226rpx;
        .pro-cate{
          font-size: 28rpx;
          color: rgb(144,147,153);
          margin-bottom: 24rpx;
        }
        .pro-cate-item{
            width: 168rpx;
            height: 64rpx;
            border-radius: 410rpx;
            background-color: rgb(255,205,39);
            font-size: 28rpx;
            color: rgb(48,49,51);
            text-align: center;
            line-height: 64rpx;
            margin: 0 32rpx 32rpx 0;
            display: inline-block;
            &:nth-child(3n){
              margin: 0;
            }
          }
        
      }
    }
    .pro-btn{
      width: 402rpx;
      height: 88rpx;
      background-color: rgb(255,205,39);
      border-radius: 596rpx;
      margin: 0 auto;
      font-size: 32rpx;
      color: rgb(48,49,51);
      text-align: center;
      line-height: 88rpx;
    }
  }
</style>